/* CSS Document */
/*css初始化代码  清楚元素的内外边距*/
body, p, div, a {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
body {
  background-color: #010001;
/*	约束屏幕最小尺寸*/
  min-width: 1200px;
}
a {
  /*	取消链接默认下划线*/
  text-decoration: none;
}
/*固定导航栏开始*/
.header {
  width: 100%;
  height: 48px;
  background-color: #010001;
  /*固定定位*/
  position: fixed;
  top: 0;
  left: 0;
/*
定位叠加层级z-index（提高层级）
注意：1、后面的数值只能是整数，数字越大，层级越高，并且不带单位
	 2、只有定位的盒子（相对定位，固定定位，绝对定位）才有z-index这个属性。
*/
  z-index: 10;
}
.headerContent{
	width: 1200px;
	height: 48px;
	margin: auto;
	background-color: #010001;
}
.headerContent img{
	float: left;
	margin-top: 10px;
}
.nav{
	float: right;
	height: 48px;
/*	小技巧：设置line-height等于高度，可以让单行文字垂直居中*/
	line-height: 48px;
}
.nav a{
	color: #A4A4A4;
	margin-left: 35px;
}
.section {
	color: #FFFFFF;      
}
/***************************************************1*/
.section1 {
/*	../ 返回上一级*/
	background-image: url("../images/section1_bg.jpg");
/*	让我们的背景图片在盒子内垂直和水平居中*/
	background-position: center;
}
.title-box {
	position: absolute;
	width: 100%;
	top: 150px;
}
.title-box p {
	font-size: 60px;
	text-align: center;
	color: #FFFFFF;
	margin-bottom: 25px;
/*	字间距的写法*/
	letter-spacing: 5px;
}
.title-box a {
/*	改为块状元素*/
	display: block;
	width: 300px;
	height: 60px;
	background-image: url("../images/links.png");
	margin: auto;
}
/*鼠标经过a链接的写法*/
/*精 灵 技 术*/
/*鼠标经过伪类选择器   a:hover{...} */
.title-box a:hover{
/*	background-position: x坐标 y坐标*/
	background-position: -300px 0;
}
.ball1 {
	position: absolute;
	top: 22.7%;
	left: 20%;
	width: 13.2%;
/*调用动画*/
	animation: ball 5s linear infinite alternate;
}
.ball2 {
	position: absolute;
	top: 49.8%;
	left: 65.16%;
	width: 22.3%;
	/*调用动画*/
	animation: ball 7s linear infinite alternate;
}
/*
大球和小球动画效果
animation动画:
动画( animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，可以实现更多变化，更多控制，连续自动播放等效果。
*/
/*1.创建动画*/
@keyframes ball {
	from{
		margin-top: 0;
	}to{
		margin-top: -25px;
	}
}
/*
animation :动画名称 持续时间 运动曲线 播放次数 是否反方向;
animation: myfirst 5s linear infinite alternate;
1．动画名称自定义，但是必须和创建动画的名称一致。
2．持续时间必须跟单位是秒s，不要忘记加单位。
3．运动曲线是匀速linear
4．播放次数infinite是无限循环
5．是否反方向。alternate 跑马灯，来回撞墙的意思....
*/
.ship {
	position: absolute;
	width: 7.2%;
	left: 63.96%;
	top: 40.18%;
/*	设置旋转方式*/
/*	里面的数值是 正数则是顺时针 负数则是逆时针*/
	transform: rotate(30deg);
	/*调用动画*/
	animation: ship 10s linear infinite alternate;
}
/*
元素旋转效果∶
transform: rotate (30deg) 
transform转换   rotate旋转   30deg就是30度，deg是个单位。
*/
/*创建动画*/
@keyframes ship {
	from{
	transform: rotate(0deg);
	}to{
	transform: rotate(-25deg);
	}
}
/***************************************************2*/
.section video {
	width: 100%;
	height: 100%;
	
}
/*
绝对定位的盒子垂直居中
1. top : 50%走父盒子高度的一半
2. transform: translateY(-50%);往上走当前盒子高度的一半
3. translate位移 如果加的是百分比，是相对于自身高度来移动的
同理，如果是水平居中不能用 margin: auto;因为有了绝对定位，总是根据left和top bottom right 来移动位置
1. left : 50% 走父盒子宽度的一半
2. transform: translateX(-50%);往上走当前盒子宽度的一半
*/
.word-content {
/*	让文字模块隐藏*/
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 18%;
}
.bigword{
	font-size: 60px;
}
.line {
	width: 28px;
	height: 3px;
	background-color: #5E5E5E;
	margin-top: 20px;
	margin-bottom: 20px;
}
.midword{
	font-size: 36px;
}
.smallword{
	font-size: 16px;
	margin-top: 12px;
}
.word-content a {
	display: block;
	width: 200px;
	height: 48px;
	margin-top: 50px;
	background-image: url("../images/link2.png");
}
.word-content a:hover{
	background-position: -200px 0;
}
/*****底部模块**********************************************5*/
.footer {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 120px;
	background-color: #131415;
	text-align: center;
	padding-top: 38px;
	color: #4A4A4A;
	line-height: 22px;
	font-size: 12px;
}
.footer img {
/*	让图片和文字垂直居中*/
	vertical-align: middle;
}
/*修改右侧小圆点颜色*/
#fp-nav ul li a.active span {
	background: rgba(255,255,255,0.8);
}